<script setup lang="ts" name="RetreatSetHistory">
import { ref } from "vue";
import router from "@/router";
import HistoryFilter from "@/components/TallyHistory/HistoryFilter.vue";
import { useHistorySearchParam } from "@/store/history-search-param";
import RetreatSetPage from "@/components/Retreat/RetreatSetPage.vue";
import { showFailToast } from "vant";

const showFloatNav = ref(false);
const retreatSetPageRef = ref();
const historySearchParamStore = useHistorySearchParam();
const showFilterPopup = ref(false);
const themeVars = {
  navBarIconColor: "#000000"
};

window.addEventListener("scroll", function () {
  const scrollTop =
    document.documentElement.scrollTop || document.body.scrollTop;
  showFloatNav.value = scrollTop > 80;
});

const isFilterOpen = (value: boolean) => {
  showFilterPopup.value = value;
};
const selectedParam = (value: any) => {
  if (!value) {
    showFailToast("搜索条件设置失败");
  }
  historySearchParamStore.setParam(value);
};

function goBack(): void {
  historySearchParamStore.removeParam();
  router.back();
}
</script>
<template>
  <div class="container flex flex-col bg-slate-200" ref="self">
    <van-config-provider :theme-vars="themeVars">
      <Transition name="fade">
        <div class="float-header-tally shadow" v-if="showFloatNav">
          <van-nav-bar
            class="mt-[60px] text-white"
            style="background: transparent"
            :border="false"
            title="退关台账"
            @click-left="goBack"
            left-arrow
          />
        </div>
      </Transition>
      <div class="pt-[60px] bg-white">
        <div class="flex w-full h-[40px]">
          <div class="flex w-[10%] justify-center items-center" @click="goBack">
            <van-icon name="arrow-left" size="20" />
          </div>
          <div class="flex w-[80%] justify-center items-center">
            <div class="flex flex-1 flex-col h-full items-center">
              <div
                class="flex flex-1 w-full justify-center items-center text-blue-500 font-bold"
              >
                退关台账
              </div>
              <div class="flex h-[2px] w-1/3 rounded bg-blue-500"></div>
            </div>
          </div>
          <div class="flex w-[10%] justify-center items-center">
            <van-icon
              :dot="historySearchParamStore.historySearchParam.isSearching"
              :color="
                historySearchParamStore.historySearchParam.isSearching
                  ? 'blue'
                  : 'black'
              "
              name="search"
              size="20"
              @click="showFilterPopup = true"
            />
          </div>
        </div>
      </div>

      <RetreatSetPage ref="retreatSetPageRef"></RetreatSetPage>

      <van-popup
        round
        v-model:show="showFilterPopup"
        position="bottom"
        :style="{ height: '40%', background: '#f6f6f6' }"
      >
        <HistoryFilter
          @isOpen="isFilterOpen"
          @selectedParam="selectedParam"
        ></HistoryFilter>
      </van-popup>
    </van-config-provider>
  </div>
</template>
<style scoped>
.header {
  background: linear-gradient(144deg, rgba(64, 169, 255, 1) 6%, #f7f8fa 6%);
}

.back-image {
  background-image: url("../../assets/back.png");
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease-in-out;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.float-header-tally {
  position: fixed;
  z-index: 999;
  top: 0;
  width: 100%;
  height: auto;
  background: #ffffff;
  color: #000000;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
</style>
